<template>
    <ul class="Tabbar">
        <router-link to="/home" tag="li" :class="{on:data.index===1}">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-xueli"></use>
            </svg>
            <p>学院首页</p>
        </router-link>
        <router-link :to="{path:'/learn',query:{}}" tag="li" :class="{on:data.index===2}">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-shu"></use>
            </svg>
            <p>名师课堂</p>
        </router-link>
        <!--  -->
        <router-link :to="{path:'/uploadList',query:{}}" tag="li" :class="{on:data.index===3}">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-shangchuan"></use>
            </svg>
            <p>上传赚钱</p>
        </router-link>
        <!-- <li @click="appUpload" v-if="inApp()">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-shangchuan"></use>
            </svg>
            <p>上传赚钱</p>
        </li> -->

        <li :class="{on:data.index===4}" @click="getLogin">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-gongwenbao1"></use>
            </svg>
            <p>书包</p>
        </li>
    </ul>
</template>

<script>
    export default {
        name: 'Tabbar',
        data () {
            return {
            }
        },
        props:['data'],
        created(){
        },
        methods:{
            //判断用户是否登录
            getLogin(){
                let loginState = JSON.parse(window.localStorage.getItem('userInfo'))
                //判断用户信息存在与否 且是否来自app
                if(loginState){//用户信息存在 跳转个人中心
                    if(loginState.is_ios && loginState.is_ios===1){
                        this.$router.push('/bagLogout')
                    }else{
                        this.$router.push('/bag')
                    }
                }else{//用户信息不存在时
                    this.$router.push('/bagLogout')
                }
            },
            //app的课程上传
            appUpload(){
                if(this.deviceType()=== 1){//安卓
                    window.hy.showVideoListUI();
                }else if(this.deviceType() === 2){//IOS
                    window.webkit.messageHandlers.hyShowVideoListUI.postMessage(null)
                }
            },
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
    .Tabbar{
        position: fixed;
        width: 100%;
        height: 1rem;
        left: 0;
        bottom: 0;
        background-color: #fff;
        border-top: 1px solid #e4e4e4;
        text-align: center;
        color: #777;
        display: flex;
        justify-content: space-around;
        font-size: .2rem;
        li{
            padding-top: .14rem;
            float: left;
            /*            width: 33.33%;*/
            height: 100%;
            text-align: center;
            .icon{
                font-size: .38rem;
            }
            p{
                margin-top: .1rem;
            }
            &.on{
                color: #e7470e;
            }
        }
    }
</style>
